<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyDesktop</title>
    <link rel="stylesheet" href="/resources/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .time-display {
            font-size: 1rem;
            font-weight: 300;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }

        .time-display i {
            margin-right: 12px;
            font-size: 1.5rem;
            color: #3498db;
        }

        .files-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 25px;
            justify-items: center;
        }

        .file-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 15px;
            border-radius: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            /* 初始状态融入背景 */
            background: transparent;
            border: 1px solid transparent;
            opacity: 0.9;
            position: relative;
        }

        .file-item:hover {
            background: rgba(255, 255, 255, 0.85);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            opacity: 1;
            z-index: 10;
        }

        .file-icon {
            width: 64px;
            height: 64px;
            margin-bottom: 15px;
            object-fit: contain;
            transition: transform 0.3s;
        }

        .file-item:hover .file-icon {
            transform: scale(1.1);
        }

        .file-name {
            text-align: center;
            font-size: 14px;
            word-break: break-word;
            max-width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-weight: 500;
            color: #2c3e50;
        }

        .file-type {
            font-size: 12px;
            color: #7f8c8d;
            margin-top: 5px;
            font-weight: 400;
        }

        .info-bar {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 12px;
            font-size: 14px;
            color: #34495e;
        }

        /* 右键菜单样式 */
        .context-menu {
            position: absolute;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            min-width: 180px;
            overflow: hidden;
            display: none;
        }

        .context-menu-item {
            padding: 12px 20px;
            display: flex;
            align-items: center;
            transition: all 0.2s;
            cursor: pointer;
        }

        .context-menu-item i {
            margin-right: 10px;
            width: 20px;
            color: #3498db;
        }

        .context-menu-item:hover {
            background: #f0f7ff;
        }

        .context-menu-item.delete:hover {
            background: #ffecec;
            color: #e74c3c;
        }

        .context-menu-item.delete:hover i {
            color: #e74c3c;
        }

        /* 重命名输入框 */
        .rename-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            display: none;
        }

        .rename-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .rename-container h3 {
            margin-bottom: 20px;
            color: #2c3e50;
            font-weight: 500;
        }

        .rename-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .rename-input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .rename-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .rename-btn {
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            border: none;
            font-weight: 500;
            transition: all 0.2s;
        }

        .rename-btn.confirm {
            background: #3498db;
            color: white;
        }

        .rename-btn.confirm:hover {
            background: #2980b9;
        }

        .rename-btn.cancel {
            background: #f0f0f0;
            color: #333;
        }

        .rename-btn.cancel:hover {
            background: #e0e0e0;
        }

        /* 删除确认对话框 */
        .delete-confirm {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            display: none;
        }

        .delete-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .delete-container h3 {
            margin-bottom: 15px;
            color: #e74c3c;
            font-weight: 500;
        }

        .delete-container p {
            margin-bottom: 25px;
            color: #555;
            line-height: 1.5;
        }

        .delete-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .delete-btn {
            padding: 10px 25px;
            border-radius: 8px;
            cursor: pointer;
            border: none;
            font-weight: 500;
            transition: all 0.2s;
        }

        .delete-btn.confirm {
            background: #e74c3c;
            color: white;
        }

        .delete-btn.confirm:hover {
            background: #c0392b;
        }

        .delete-btn.cancel {
            background: #f0f0f0;
            color: #333;
        }

        .delete-btn.cancel:hover {
            background: #e0e0e0;
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }
            
            .files-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 20px;
            }
            
            .file-icon {
                width: 56px;
                height: 56px;
            }
        }

        @media (max-width: 480px) {
            .time-display {
                font-size: 1.4rem;
            }
            
            .files-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 15px;
            }
            
            .file-item {
                padding: 15px 10px;
            }
            
            .file-icon {
                width: 48px;
                height: 48px;
            }
            
            .file-name {
                font-size: 13px;
            }
            
            .context-menu {
                min-width: 160px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="time-display">
                <i class="fas fa-clock"></i>
                <span id="current-time">2023年11月15日 星期三 10:30:45</span>
            </div>
        </div>

        <div class="files-grid" id="filesContainer">
            <!-- 文件项将通过JavaScript动态生成 -->
        </div>

        <!-- 右键菜单 -->
        <div class="context-menu" id="contextMenu">
            <div class="context-menu-item" id="menuOpen">
                <i class="fas fa-folder-open"></i>
                <span>打开</span>
            </div>
            <div class="context-menu-item" id="menuCopy">
                <i class="fas fa-copy"></i>
                <span>复制</span>
            </div>
            <div class="context-menu-item" id="menuRename">
                <i class="fas fa-edit"></i>
                <span>重命名</span>
            </div>
            <div class="context-menu-item delete" id="menuDelete">
                <i class="fas fa-trash-alt"></i>
                <span>删除</span>
            </div>
        </div>
        <div class="context-menu" id="blankMenu">
            <div class="context-menu-item" id="menuPaste">
                <i class="fas fa-paste"></i>
                <span>粘贴</span>
            </div>
            <div class="context-menu-item" id="menuNew">
                <i class="fas fa-plus"></i>
                <span>新建</span>
            </div>
        </div>

        <!-- 重命名对话框 -->
        <div class="rename-overlay" id="renameOverlay">
            <div class="rename-container">
                <h3>重命名文件</h3>
                <input type="text" class="rename-input" id="renameInput" placeholder="输入新文件名">
                <div class="rename-buttons">
                    <button class="rename-btn cancel" id="renameCancel">取消</button>
                    <button class="rename-btn confirm" id="renameConfirm">确认</button>
                </div>
            </div>
        </div>

        <!-- 删除确认对话框 -->
        <div class="delete-confirm" id="deleteConfirm">
            <div class="delete-container">
                <h3>确认删除</h3>
                <p>您确定要删除文件 "<span id="deleteFileName"></span>" 吗？此操作不可恢复。</p>
                <div class="delete-buttons">
                    <button class="delete-btn cancel" id="deleteCancel">取消</button>
                    <button class="delete-btn confirm" id="deleteConfirmBtn">确认删除</button>
                </div>
            </div>
        </div>

        <!-- 新建文件对话框 -->
        <div class="rename-overlay" id="newFileOverlay">
            <div class="rename-container">
                <h3>新建文件</h3>
                <select id="newFileTypeSelect" class="rename-input">
                    <option value="docx">Word 文档 (.docx)</option>
                    <option value="xlsx">Excel 表格 (.xlsx)</option>
                    <option value="pptx">PPT 演示 (.pptx)</option>
                    <option value="txt">文本文件 (.txt)</option>
                    <option value="folder">文件夹</option>
                </select>
                <div class="rename-buttons">
                    <button class="rename-btn cancel" id="newFileCancel">取消</button>
                    <button class="rename-btn confirm" id="newFileConfirm">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const blankMenu = document.getElementById('blankMenu');
        const newFileOverlay = document.getElementById('newFileOverlay');
        const newFileTypeSelect = document.getElementById('newFileTypeSelect');
        const newFileCancel = document.getElementById('newFileCancel');
        const newFileConfirm = document.getElementById('newFileConfirm');
        const menuPaste = document.getElementById('menuPaste');
        const menuNew = document.getElementById('menuNew');
        let files_data = []
        let selectedFile = null;
        let contextMenu = null;
        let dealling = false;
        
        // 获取文件类型
        function getFileType(fileName,fileType) {
            const ext = fileName.split('.').pop().toLowerCase();
            const types = {
                'docx': '文档',
                'doc': '文档',
                'xlsx': '电子表格',
                'xls': '电子表格',
                'pptx': '演示文稿',
                'ppt': '演示文稿',
                'pdf': 'PDF文件',
                'jpg': '图片',
                'png': '图片',
                'mp4': '视频',
                'mp3': '音频',
                'psd': '设计稿',
                'fig': '设计稿',
                'sql': '数据库',
                'json': '配置文件',
                'zip': '压缩文件',
                'exe': '应用程序',
            };
            if(ext in types){
                return types[ext];
            } else if(fileType == '文件夹'){
                return '文件夹';
            } else {
                return fileType+'文件';
            }
        }

        // 更新当前时间
        function updateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                weekday: 'long',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            };
            document.getElementById('current-time').textContent = now.toLocaleDateString('zh-CN', options);
        }
        function open_file(filePath) {
            window.pywebview.api.open_file(filePath);
        }
        function open_mhyGame(filePath,game){
            window.pywebview.api.open_mhyGame(filePath,game);
        }
        function copy_file(filePath) {
            window.pywebview.api.copy_file(filePath);
        }
        function rename_file(filePath, newName) {
            window.pywebview.api.rename_file(filePath, newName);
            push()
        }
        async function remove_file(filePath) {
            var r = await window.pywebview.api.remove_file(filePath);
            push()
            return r
        }

        // 显示右键菜单
        function showContextMenu(e, file) {
            e.preventDefault();
            blankMenu.style.display = 'none';
            selectedFile = file;
            
            contextMenu.style.display = 'block';
            contextMenu.style.left = `${e.pageX}px`;
            contextMenu.style.top = `${e.pageY}px`;
        }

        // 隐藏右键菜单
        function hideContextMenu() {
            contextMenu.style.display = 'none';
        }

        // 显示重命名对话框
        function showRenameDialog() {
            const renameOverlay = document.getElementById('renameOverlay');
            const renameInput = document.getElementById('renameInput');
            
            renameInput.value = selectedFile.fileName;
            renameOverlay.style.display = 'flex';
            renameInput.focus();
            
            hideContextMenu();
        }

        // 显示删除确认对话框
        function showDeleteConfirm() {
            const deleteConfirm = document.getElementById('deleteConfirm');
            const deleteFileName = document.getElementById('deleteFileName');
            
            deleteFileName.textContent = selectedFile.fileName;
            deleteConfirm.style.display = 'flex';
            
            hideContextMenu();
        }
        async function push(){
            files_data = await window.pywebview.api.get_inf()
            files_data = files_data["data"]
            const filesContainer = document.getElementById('filesContainer');
            filesContainer.innerHTML = '';
            contextMenu = document.getElementById('contextMenu');
            
            // 渲染文件列表
            files_data.forEach(file => {
                const fileElement = document.createElement('div');
                fileElement.className = 'file-item';
                
                const fileType = getFileType(file.file,file.fileType);
                
                fileElement.innerHTML = `
                    <img src="${file.ico}" alt="${file.fileName}" class="file-icon">
                    <span class="file-name">${file.fileName}</span>
                    <span class="file-type">${fileType}</span>
                `;
                
                // 添加点击事件
                fileElement.addEventListener('click', function() {
                    if(file.game){
                        open_mhyGame(file.filePath,file.game);
                    }else{
                        open_file(file.filePath);
                    }
                });
                
                // 添加右键菜单事件
                fileElement.addEventListener('contextmenu', function(e) {
                    showContextMenu(e, file);
                });
                
                filesContainer.appendChild(fileElement);
            });
        }
        // 页面加载完成后执行
        window.addEventListener('pywebviewready',async function() {
            push()
        });

        // 监听空白区域右键点击
        document.querySelector('.files-grid').addEventListener('contextmenu', function(e) {
            if (e.target === this) {
                e.preventDefault();
                hideContextMenu();
                blankMenu.style.display = 'block';
                blankMenu.style.left = `${e.pageX}px`;
                blankMenu.style.top = `${e.pageY}px`;
            }
        });

        // 点击空白处隐藏菜单
        document.addEventListener('click', function() {
            blankMenu.style.display = 'none';
        });
        // 模拟的put_file函数
        async function put_file() {
            await window.pywebview.api.put_file();
            push();
        }

        // 模拟的new_file函数
        async function new_file(fileType) {
            await window.pywebview.api.new_file(fileType);
            push(); // 刷新界面
        }

        // 粘贴按钮事件
        menuPaste.addEventListener('click',async function() {
            try{
                r = await put_file();
                try{
                    if(r["success"]==false){
                        showError(r["message"]);
                    }
                }catch{}
                blankMenu.style.display = 'none';
            }catch{}
        });

        // 新建按钮事件
        menuNew.addEventListener('click', function() {
            newFileOverlay.style.display = 'flex';
            blankMenu.style.display = 'none';
        });

        // 取消新建
        newFileCancel.addEventListener('click', function() {
            newFileOverlay.style.display = 'none';
        });

        // 确认新建
        newFileConfirm.addEventListener('click',async function() {
            const selectedType = newFileTypeSelect.value;
            if (selectedType) {
                await new_file(selectedType);
                newFileOverlay.style.display = 'none';
                push();
            }
        });
        function hideAllMenus() {
            hideContextMenu();         // 隐藏文件菜单
            blankMenu.style.display = 'none';  // 隐藏空白菜单
        }

        document.addEventListener('click', hideAllMenus);

        document.addEventListener('DOMContentLoaded', function() {
            // 更新时间
            updateTime();
            setInterval(updateTime, 1000);
            
            // 右键菜单项事件z
            document.getElementById('menuOpen').addEventListener('click', function() {
                if(selectedFile['game']){
                    open_mhyGame(selectedFile.filePath,selectedFile.game);
                }else{
                    open_file(selectedFile.filePath);
                }
                hideContextMenu();
            });
            
            document.getElementById('menuCopy').addEventListener('click', function() {
                copy_file(selectedFile.filePath);
                hideContextMenu();
            });
            
            document.getElementById('menuRename').addEventListener('click', showRenameDialog);
            document.getElementById('menuDelete').addEventListener('click', showDeleteConfirm);
            
            // 重命名相关事件
            document.getElementById('renameCancel').addEventListener('click', function() {
                if(dealling)return
                dealling = true
                document.getElementById('renameOverlay').style.display = 'none';
                dealling = false
            });
            
            document.getElementById('renameConfirm').addEventListener('click', function() {
                if(dealling)return
                dealling = true
                const newName = document.getElementById('renameInput').value.trim();
                if (newName) {
                    rename_file(selectedFile.filePath, newName);
                    document.getElementById('renameOverlay').style.display = 'none';
                }
                dealing = false
            });
            
            // 删除相关事件
            document.getElementById('deleteCancel').addEventListener('click', function() {
                document.getElementById('deleteConfirm').style.display = 'none';
                dealing = false
            });
            
            document.getElementById('deleteConfirmBtn').addEventListener('click',async function() {
                dealling = true
                var r = await remove_file(selectedFile.filePath);
                if(r["success"]==false){
                    showError(r["message"])
                }
                document.getElementById('deleteConfirm').style.display = 'none';
                dealling = false
            });
            
            // 点击页面其他位置关闭右键菜单
            document.addEventListener('click', hideContextMenu);
            
            // 重命名输入框按回车确认
            document.getElementById('renameInput').addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('renameConfirm').click();
                }
            });
        })
    </script>
    <script>
        function showError(code) {
            // 创建外层提示框
            const errorBox = document.createElement('div');
            errorBox.style.position = 'fixed';
            errorBox.style.top = '-100px';
            errorBox.style.left = '50%';
            errorBox.style.transform = 'translateX(-50%)';
            errorBox.style.padding = '20px 30px';
            errorBox.style.backgroundColor = '#ff4d4d';
            errorBox.style.color = 'white';
            errorBox.style.fontSize = '16px';
            errorBox.style.borderRadius = '12px';
            errorBox.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
            errorBox.style.zIndex = '9999';
            errorBox.style.opacity = '0';
            errorBox.style.transition = 'opacity 0.5s ease, top 0.5s ease';
            errorBox.style.textAlign = 'center';

            // 创建文字内容
            const text = document.createElement('div');
            text.textContent = code;
            errorBox.appendChild(text);

            // 添加到 body
            document.body.appendChild(errorBox);

            // 触发动画显示
            setTimeout(() => {
                errorBox.style.top = '20px';
                errorBox.style.opacity = '1';
            }, 100);

            // 5秒后自动消失（淡出）
            setTimeout(() => {
                errorBox.style.opacity = '0';
                errorBox.style.top = '-100px';

                // 完全隐藏后移除元素
                setTimeout(() => {
                    if (errorBox.parentNode) {
                        errorBox.remove();
                    }
                }, 500);
            }, 5000);
        }
    </script>
</body>
</html>